<template>
  <div class="home-create" ref="homeCreate">
    <a-modal
      v-model="Visible"
      title="视图创建"
      centered
      width="960px"
      okText="创建"
      :getContainer="getContainer"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <div class="home-create-tooltip">
        <svg-icon type="home-tooltip" />
        <span>视图模版非必选，可通过勾选对已有标准视图直接编辑。</span>
      </div>
      <div class="home-create-form">
        <a-form :form="form" autocomplete="off">
          <a-form-item label="视图名称" name="username" class="home-create-form-view">
            <a-input
              v-decorator="['username', {
              rules: [{ required: true, message: '必填项,最多输入6个汉字', max: 6 }]
            }]"
              placeholder="请输入视图名称"
            />
          </a-form-item>
          <a-form-item label="视图模板" class="home-create-view">
            <div class="home-view-content">
              <div
                v-for="(item, index) in viewModel"
                :key="index"
                :style="{ 'background-image': `url(${item.url})` }"
                :class="['home-view-content-img', { 'home-view-active': item.value == checkView }]"
                @click="handleChecked(item.value)"
              >
                <div
                  class="home-view-checked"
                  :style="{ 'background-image': getChecked(item.value == checkView) }"
                ></div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'CreateModal',
  props: {
    showVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    Visible: {
      get () {
        return this.showVisible
      },
      set (val) {
        this.$emit('update:showVisible', val)
      }
    }
  },
  watch: {
    Visible () {
      if (this.Visible) {
        this.checkView = ''
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, {
        username: ''
      }),
      checkView: '',
      viewModel: [
        {
          name: '网络概览',
          url: 'tgcos/gesp/template1.png',
          value: 1
        },
        {
          name: '重保视图',
          url: 'tgcos/gesp/template2.png',
          value: 2
        },
        {
          name: '服务跟踪',
          url: 'tgcos/gesp/template3.png',
          value: 3
        },
        {
          name: '质量监控',
          url: 'tgcos/gesp/template4.png',
          value: 4
        },
        {
          name: '电路拓扑',
          url: 'tgcos/gesp/template5.png',
          value: 5
        }
      ]
    }
  },
  methods: {
    getContainer () {
      return this.$refs.homeCreate
    },
    getChecked (e) {
      return e ? `url(${this.$imgUrl}/lcd-icon-home-checked.png)` : 'none'
    },
    handleChecked (e) {
      this.checkView = e
    },
    handleSubmit () {
      this.form.validateFields(['username'], (err, value) => {
        if (!err) {
          this.$emit('handleCreateUpdate', {
            viewNumber: this.checkView, // 1 - 6  默认为空
            viewName: value.username
          })
        }
      })
    },
    handleCancel () {
      this.$emit('update:showVisible', false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/vars.less";
.home-create {
  /deep/ .ant-modal-root {
    .ant-modal-content {
      background-color: @dark-color-3;
    }
    .ant-modal-header {
      padding: 13px 16px;
      box-sizing: border-box;
      border-bottom: 1px solid lighten(@dark-color, 31.96% - lightness(@dark-color));
      background-color: @dark-color-3;
      font-size: 16px;
      color: lighten(@dark-color, 100% - lightness(@dark-color));
    }
    .ant-modal-close-x {
      color: lighten(@dark-color, 100% - lightness(@dark-color));
    }
    .ant-modal-body {
      padding: 0;
      .home-create-tooltip {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background: rgba(@primary-color, 0.1);
        color: lighten(@dark-color, 79.5% - lightness(@dark-color));
        font-size: 14px;
        padding-left: 16px;
        box-sizing: border-box;
        span {
          margin-left: 8px;
        }
      }
      .home-create-form {
        padding: 16px;
        box-sizing: border-box;
        .ant-form-item-label > label::after {
          content: "";
        }
        .ant-form-item {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 8px;
          }
        }
        .home-create-form-view {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          .ant-form-item-control {
            width: 280px;
            input {
              position: relative;
              border: 1px solid lighten(@dark-color, 57.2% - lightness(@dark-color));
            }
          }
        }
        .home-create-view {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          .ant-form-item-label {
            label {
              display: inline-block;
              transform: translateY(-13px);
              padding-left: 10px;
              box-sizing: border-box;
            }
          }
          .ant-form-item-control-wrapper {
            width: 100%;
            .ant-form-item-control {
              width: 100%;
              .home-view-content {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 16px;
                margin-left: 7px;
                font-size: 18px;
                .home-view-content-img {
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 274px;
                  height: 154px;
                  border-radius: 4px;
                  opacity: 0.7;
                  background-size: contain;
                  background-position: center;
                  background-repeat: no-repeat;
                  border: 1px solid lighten(@dark-color, 8.3% - lightness(@dark-color));
                  cursor: pointer;
                  &.home-view-active {
                    opacity: 1;
                    border: 1px solid @primary-color;
                  }
                  .home-view-checked {
                    position: absolute;
                    top: 12px;
                    left: 12px;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    border: 1px solid lighten(@dark-color, 82.3% - lightness(@dark-color));
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    &:hover {
                      border: 1px solid @primary-color;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>